import React from "react"
import { Row, Col, Tag } from "antd"
import { getUrlParam } from "@/util/util"
import BreadCrumb from "@/view/comps/breadcrub/breadcrub"
import "./article.less"

export default class ArticleDetail extends React.Component {
	constructor(props) {
		super(props)
		this.id = getUrlParam("id")
		this.state = {
			article: ""
		}
	}
	componentDidMount() {
		this.getArticleDetail()
	}

	getArticleDetail = () => {
		AJAX({
			url: "/findArticleList",
			data: { _id: this.id }
		}).then(
			res => {
				let article = res.data[0] || {}
				this.setState({ article })
			},
			err => message.error(err.msg)
		)
	}

	render() {
		const article = this.state.article
		return (
			<div>
				<BreadCrumb
					bread={[
						{ title: "Dashboard", link: "/" },
						{ title: "博客列表", link: "/app/article" },
						{ title: "博客详情" }
					]}
				/>
				<div className="page-container article-detail">
					<Row>
						<h1 className="text-center font-28 font-bold mt-20 mb-40">
							{article.title}
						</h1>
						<Col md={2} lg={2} xl={2} />
						<Col md={20} lg={20} xl={20} className="panel">
							<div className="mb-20">
								副标题：{article.subTitle}
							</div>
							<div className="mb-20">
								分类：
								<Tag color="magenta">{article.classify}</Tag>
							</div>
							<div className="mb-20">
								标签：<Tag color="red">{article.tag}</Tag>
							</div>
							<div className="mb-20">
								状态：
								<Tag color="lime">
									{article.status == "1"
										? "未完成"
										: "已完成"}
								</Tag>
							</div>
							<div
								className="markdown-body mt-20"
								dangerouslySetInnerHTML={{
									__html: article.text
								}}
							/>
						</Col>
						<Col md={2} lg={2} xl={2} />
					</Row>
				</div>
			</div>
		)
	}
}
